<template>
<div class="base-container">
    <el-container>
        <el-aside width="48px">
            <nav-menu></nav-menu>
        </el-aside>
        <el-container class="my-container" :class="{'wrap-active': $route.path === '/expEdit'}">
            <el-header>
                <head-nav></head-nav>
            </el-header>
            <el-main class="scroll-bar">
                <div class="back-btn" v-show="showHeaderBack" style="height: 36px;">
                    <el-button class="header-back-btn" icon="el-icon-back" @click="$router.go(-1)" type="text">{{headerBack}}</el-button>
                </div>
                <div class="router-view" :style="{height: showHeaderBack ? 'calc(100% - 36px)' : '100%', background: $route.path === '/expTemplate' ? 'transparent' : ''}">
                    <!-- <bread-crumb></bread-crumb> -->
                    <router-view />
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
import NavMenu from '@/views/menu/NavMenu'
import HeadNav from '@/views/menu/HeadNav'
import { mapGetters } from 'vuex'
// import BreadCrumb from '@/views/menu/BreadCrumb'
export default {
    name: 'container',
    components: {
        NavMenu,
        HeadNav
    },
    data () {
        return {
            showBackRoutes: ['/expHistory', '/checkProgress', '/dataSource', '/operations/taskDetail', '/taskDetail', '/taskLogDetail']
        }
    },
    computed: {
        ...mapGetters({
            headerBack: 'common/getHeaderBack'
        }),
        showHeaderBack () {
            return this.showBackRoutes.includes(this.$route.path)
        }
    }
}
</script>

<style lang="less">

.base-container {
    width: 100%;
    height: 100%;
    .header-back-btn {
        text-align: left;
    }
    .back-btn {
        display: flex;
        align-items: center;
        .el-icon-back {
            font-weight: 700;
        }
        .el-button {
            font-size: 16px;
            color: #333;
            font-weight: 700;
            &:hover {
                color: #2680eb;
            }
        }
    }

    .el-header {
        height: 48px !important;
        text-align: center;
        line-height: 48px;
        background: #001A2E;
    }

    .el-aside {
        text-align: center;
    }

    .el-container,
    .el-menu {
        width: 100%;
        height: 100%;
        border: none;
    }

    .el-main {
        height: 100%;
        overflow: hidden;
        padding: 16px;
        background: #f5f5f5;
        position: relative;
    }
    .router-view {
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 4px;
        padding: 16px;
        background: #fff;
    }

    .wrap-active {

        .router-view,
        .el-main {
            padding: 0;
            height: 100%;
            min-height: initial;
        }
    }
}
</style>
